<template>
	<up-navbar bgColor="transparent">
		<template #left>
			<view class="u-flex u-flex-items-center">
				<view class="f-s-18 l-s-2 f-w-b u-m-r-24">
					<image src="@/static/images/index_title.png" style="width: auto;height: 20px;" mode="heightFix"></image>
				</view>
				<up-icon v-if="search" @click="toSearchPage" name="search" :color="`rgba(32, 128, 247,1)`" size="24"
					label="找专家、课程、资料" :labelSize="12"></up-icon>
			</view>
		</template>
	</up-navbar>
	<u-sticky :zIndex="9">
		<view class="_header" :style="{
		paddingTop: `${bottom + 10 }px`
	}" />
	</u-sticky>
	<view class="_area">
		<up-swiper circular keyName="imgUrl" indicator indicatorMode="dot" :displayMultipleItems="0" :list="indexInfo.bannerList" :height="180"
			:radius="8" bgColor="transparent" :interval="6000">
		</up-swiper>
		<view class="_search_box">
			<up-search placeholder="找专家、找课程、找资料尽在尧君智库" bgColor="transparent" height="72rpx" :showAction="false"
				searchIconColor="rgba(32, 128, 247, 1)" borderColor="rgba(32, 128, 247, 1)"
				v-model="keyword"></up-search>
			<view class="_search_btn" @click="goToSearchPage">搜索</view>
		</view>
		<area-card :top="20" :bottom="20" more icon="/static/icon/hot-teacher.png" @more-data="moreTeacher">
			<view class="hot-teacher-box">
				<block v-for="teacher in indexInfo.teacherList" :key="teacher.id">
					<!-- <hot-teacher :info="teacher" /> -->
					<teacher-index :teacher="teacher" />
				</block>
			</view>
		</area-card>
		<!-- <area-card :top="0" :bottom="0" title="近期公开课" v-if="indexInfo.openCourseList.length > 0">
			<u-scroll-list :indicator="false">
				<block v-for="course in indexInfo.openCourseList" :key="course.id">
					<open-class :course="course" width="300px" />
				</block>
			</u-scroll-list>
		</area-card> -->
		<area-card :top="0" :bottom="20" more icon="/static/icon/hot-main.png" @more-data="moreMainClass">
			<hot-main-course :hot-list="indexInfo.mainClassList" />
			<!-- <block v-for="course in indexInfo.mainClassList" :key="course.id"> -->
				<!-- <main-class :course="course"></main-class> -->
				<!-- <class-main :course="course" /> -->
			<!-- </block> -->
		</area-card>
	</view>

</template>


<script setup>
	import {
		ref
	} from 'vue';
	import PageFrame from '@/components/PageFrame.vue';
	import OpenClass from '@/components/class-open-index.vue';
	import areaCard from "@/components/area-card.vue"
	import teacherIndex from "@/components/teacher-index.vue"
	import HotTeacher from '@/components/index/HotTeacher.vue';
	import HotMainCourse from '@/components/index/HotMainCourse.vue';
	import MainClass from '@/components/main_class_index.vue'
	import classMain from "@/components/class-main-index.vue"
	import store from '@/store'
	import {
		onShareAppMessage,
		onShareTimeline,
		onPageScroll
	} from "@dcloudio/uni-app"
	import {
		toast
	} from 'uview-plus';
	import {
		index
	} from '@/api/index.js';
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const keyword = ref('')
	// 首页数据
	const indexInfo = ref({
		bannerList: [],
		mainClassList: [],
		openCourseList: [],
		teacherList: []
	})
	const search = ref(false)
	indexData()

	// 更多课程
	const moreMainClass = () => {
		uni.switchTab({
			url: '/pages/class'
		})
	}
	// 更多讲师
	const moreTeacher = () => {
		uni.switchTab({
			url: '/pages/teacher'
		})
	}

	// 首页数据
	function indexData() {
		index().then(resp => {
			indexInfo.value = resp.data
		})
	}


	function goToSearchPage() {
		//跳转到搜索页面，并传递关键字参数
		if (!keyword.value) {
			toast("请输入搜索内容")
			return
		}
		uni.navigateTo({
			url: '/pages/search?keyword=' + keyword.value
		})
	}

	const toSearchPage = () => {
		uni.navigateTo({
			url: '/pages/search'
		})
	}

	onShareAppMessage(() => {
		return {
			title: '尧君智库-首页',
		}

	})
	onShareTimeline(() => {
		return {
			title: '尧君智库-首页',
		}
	})

	onPageScroll(e => {
		const scrollTop = e.scrollTop || 0;
		if (scrollTop <= 220) {
			// 隐藏搜索
			search.value = false
			return
		}
		search.value = true
	})
</script>

<style lang="scss" >
	page{
		background-color: #F4F7FF !important;
	}
	
	._header {
		// background-image: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/05/28/png/header-top_20240528100349A039.png);
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		background-image: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/05/27/png/top_bg_20240527170416A023.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	._area {
		padding: 0 32rpx 32rpx;
	}

	.hot-teacher-box {
		// grid 2列
		display: grid;
		grid-template-columns: 1fr 1fr; // 2列，每列1fr（fraction 分数）的宽度，即平分剩余空间。
		grid-gap: 12px; // 列间距为12px。
		padding-bottom: 20px;
	}

	._search_box {
		position: relative;
		margin: 32rpx 0;

		._search_btn {
			z-index: 1;
			position: absolute;
			right: 0;
			top: 0;
			width: 128rpx;
			height: 72rpx;
			background: #2080F7;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			border: 2rpx solid #2080F7;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
		}
	}


	.page-top {
		padding: 12px;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.class-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 12px;
	}

	.more-data {
		height: 229px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	::v-deep .u-search__content__input--placeholder {
		font-size: 12px !important;
	}

	::v-deep .u-swiper {
		background-color: transparent !important;
	}
</style>